<template>
    <!-- 新增编辑弹窗 -->
    <el-dialog v-model="dialogUserRole" @close="cancel" width="600px">
      <template #header>
          <span class="_before">申请发票</span>
      </template>
            <!-- <invoiceTemplate style="margin-top: 10px;"></invoiceTemplate> -->
      <el-form :model="form" :rules="rules" ref="formRef" label-width="auto">
         <el-form-item label="发票类型" prop="invoiceType">
                    <el-radio-group v-model="form.invoiceType">
                        <el-radio value="5" label="增值税普通发票"></el-radio>
                        <el-radio value="10" label="增值税专用发票"></el-radio>
                    </el-radio-group>
                </el-form-item>
            <el-form-item label="发票抬头" prop="invoiceTitle">
                    <el-input v-model="form.invoiceTitle" style="width: 300px;" maxlength="18" placeholder="请输入发票抬头"></el-input>
                </el-form-item>
                 <el-form-item label="统一社会信用代码" prop="creditCode">
                    <el-input v-model="form.creditCode"  style="width: 300px;" maxlength="18" placeholder="请输入统一社会信用代码"></el-input>
                </el-form-item>
           
                
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="cancel()">取消</el-button>
               <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
            </div>
         </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted ,toRefs} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'
import { addBillRequestInvoice } from '@/api/invoice/indexNew.ts'
import invoiceTemplate from '@/views/components/invoiceTemplate.vue'
import type { FormInstance, FormRules } from 'element-plus'
const formRef=ref()
const dialogUserRole=ref(false) //弹框
const data = reactive({
  form: {
    invoiceOrder:[],
    invoiceTitle:'',
    invoiceType:'5',
    creditCode:''
  },
  rules: {
    invoiceType:[
        { required: true, message: '发票类型必选', trigger: 'blur' }
    ],
    invoiceTitle:[
        { required: true, message: '发票抬头必填', trigger: 'blur' },
    ],
    creditCode:[
        { required: true, message: '统一社会信用代码必填', trigger: 'blur' },
        { pattern:/^[0-9a-zA-Z]*$/, message: "只能输入数字和英文", trigger: "blur" },
    ]
  }
});
const { form, rules } = toRefs(data);
const onShow = async (billList) => {
  dialogUserRole.value = true 
  form.value.invoiceOrder=billList
}
const emits = defineEmits(['updateMode'])

/** 提交按钮 */
const submitForm = (formEl: FormInstance | undefined) =>{
  if (!formEl) return
  formEl.validate(valid => {
   let dataForm=JSON.parse(JSON.stringify(form.value))
   dataForm.invoiceOrder=JSON.stringify(dataForm.invoiceOrder)
    if (valid) {
        addBillRequestInvoice(dataForm).then(res => {
          ElMessage.success('申请发票成功');
          emits('uploadMode');
          cancel();
        });
    }
  });
};
//关闭弹框
const cancel = () => {
  formRef.value.resetFields()// 重置数据
  dialogUserRole.value=false
  form.value.invoiceOrder=[]
}
defineExpose({ onShow })
</script>

<style scoped>
.choose-item-2 {
  margin-left: 20px;
}
.stust{
  padding:0 20px;
}
.choose-item-3 {
  display: block;
  margin-left: 20px;
}
.main-cent{
  padding: 0 10px;
}
.input-sel {
  border: 1px solid #C0C4CC; 
  border-radius: 4px;
  overflow: hidden;

}
.input-sel :deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-left: 1px solid #C0C4CC; /* 默认下边框颜色 */
}
.input-sel :deep(.el-select__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; 
}
.header-title{
  border-left: 4px solid #2158F3;
  padding-left: 8px;
  line-height: 18px;
}
</style>